<link href="__PUBLIC__/Js/uploadify.v3.2.1/uploadify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="__PUBLIC__/Js/uploadify.v3.2.1/jquery.uploadify.js"></script>
<link href="__PUBLIC__/Js/jquery-plugin/imgareaselect/css/imgareaselect-default.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="__PUBLIC__/Js/jquery-plugin/imgareaselect/scripts/jquery.imgareaselect.pack.js"></script>

<style type="text/css">
.upload_head_cont{
	background: #FFF;
	padding: 10px;
	overflow: hidden;
}
.upload_head{
	float: left;
	width: 750px;
	text-align: center;
}
#preview-pane {
	float: left;
	margin-left: 30px;
}

#preview-pane .preview-container {
	width: 200px;
	overflow: hidden;
	text-align: left;
}

.img-opt,.img-data{
	overflow: hidden;
}
.upload-opt{
	overflow: hidden;
	margin-top: 5px;
	text-align: center;
}
.swfupload{
	left: 0px;
}
#file_upload{
	height: 40px;
	margin: auto;
}
#upload_queue_list{
	display: none;
}
.upload_head .btn{
	padding: 0px;
	border: 1px solid #00BEB7;
	outline: none;
	height: 26px;
	line-height: 26px;
	padding: 0px 10px;
	background: #00BEB7;
	color: #FFF;
	cursor: pointer;
	display: inline-block;
	margin: 3px;
	margin-top: 10px;
	width: 100px;
}
.upload-pic{
	overflow: hidden;
}
.upload-pic-select{
	float: left;
	width:460px;
}
.select-img{
	background: #e5e5e5;
	overflow: hidden;
	width: 460px;
	height: 400px;
	overflow-y: auto;
}
.upload-pic-select img{
	width: 460px;
}
.upload-img{
	display: none;
}
.upload-file-btn{
	height: 35px;
	width: 460px;
	padding: 182px 0px;
	text-align: center;
	overflow: hidden;
}

.uploadify-button{
	background-image:none;
	background-color: #535353;
	border-radius:5px;
	border:0px;
	font-weight: normal;
}
.crop-preview-big,.crop-preview-big img{
	width: 200px;
	height: 200px;
	overflow: hidden;
	background: #e5e5e5;
}
.crop-preview-small{
	margin-top: 10px;
}
.crop-preview-small,.crop-preview-small img{
	width: 100px;
	height: 100px;
	background: #e5e5e5;
	overflow: hidden;
}
.upload-tip{
	text-align: left;
	margin-bottom: 10px;
	line-height: 22px;
}
.upload-tip b{
	font-size: 14px;
}
.upload-example{
	float: left;
	width: 300px;
	margin-left: 10px;
	margin-top: 50px;
}
.upload-example li{
	float: left;
	width: 50%;
	text-align: center;
	margin-bottom: 10px;
}
.upload-example li span{
	width: 100%;
	line-height: 22px;
	display: block;
}
.upload-example .title{
	margin-bottom: 10px;
	line-height: 20px;
	vertical-align: middle;
}
.ico-error:before{
	content: '\e713';
	color: #ff7100;
	font-size: 20px;
	vertical-align: middle;
}
.ico-right:before{
	content: '\e701';
	color: #00beb7;
	font-size: 20px;
	vertical-align: middle;
}
.audit_desc{
	margin-top: 10px;
}
</style>
<div style="width: 710px;">
	<div class="upload_head_cont">
		<div class="item">
			<div class="upload_head">
				<div class="upload-tip">
					支持jpg、gif、png格式，单张照片在10k-2M之间； 
				</div>
				<div class="upload-pic">
					<div class="upload-pic-select">
						<div class="select-img">
							<div class="upload-file-btn">
								<input type="file" id="file_upload">
							</div>
							<img src="{$head_url}" class="upload-img">
						</div>
						<div class="upload-opt">
							<form action="{:URL('upload_head')}" class="upload-head-form" method="post">
								<input type="hidden" value="{$file_id}" name="file_id" class="file_id">
								<input type="hidden" value="" name="x1" class="crop-x1">
								<input type="hidden" value="" name="y1" class="crop-y1">
								<input type="hidden" value="" name="x2" class="crop-x2">
								<input type="hidden" value="" name="y2" class="crop-y2">
								<input type="hidden" value="" name="width" class="img-width">
								<input type="hidden" value="" name="height" class="img-height">
								<span class="btn reupload-head" style="display:none">重新上传</span>
								<span class="btn save-head" style="background: #ffbb00;border: 1px solid #ffbb00;">保存</span>
								<span class="btn" onclick="jumpurl('{:URL('basic_info')}')">返回</span>
							</form>
						</div>
					</div>
					<div id="preview-pane">
						<div class="preview-container">
							<div class="crop-preview-big">
								<img src="{$head_url}">
							</div>
							<div class="crop-preview-small">
								<img src="{$head_url}">
							</div>
							<div class="audit_desc">
								<p>状态：{$info['audit_head_status_desc']}</p>
								<neq name="info.audit_head_reason" value="">
									<p style="color:red">原因：{$info['audit_head_reason']}</p>
								</neq>
							</div>
						</div>
					</div>
				</div>
				<div id="upload_queue_list"></div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
var imgAreaSelectApi;
function crop_img () {
	imgAreaSelectApi = $('.upload-img').imgAreaSelect({
		persistent : true,  // true，选区以外点击不会启用一个新选区（只能移动/调整现有选区）
		instance : true,    // true，返回一个imgAreaSelect绑定到的图像的实例，可以使用api方法 
		aspectRatio: '1:1',
		minWidth : 200,   // 选取的最小宽度
		minHeight : 200,  // 选取的最小高度  
		handles: true,
		fadeSpeed: 200,
		hide:false,
		x1: 0,
		y1: 0,
		x2: 200,
		y2: 200,
		onSelectChange:preview
	});
	return imgAreaSelectApi;
}
function preview(img, selection) {
	if (!selection.width || !selection.height){
		return;
	}

	var scaleX = 200 / selection.width;
	var scaleY = 200 / selection.height;

	$('.crop-preview-big img').css({
		width: Math.round(scaleX * $('.upload-img').width()),
		height: Math.round(scaleY *  $('.upload-img').height()),
		marginLeft: -Math.round(scaleX * selection.x1),
		marginTop: -Math.round(scaleY * selection.y1)
	});

	scaleX = 100 / selection.width;
	scaleY = 100 / selection.height;

	$('.crop-preview-small img').css({
		width: Math.round(scaleX * $('.upload-img').width()),
		height: Math.round(scaleY *  $('.upload-img').height()),
		marginLeft: -Math.round(scaleX * selection.x1),
		marginTop: -Math.round(scaleY * selection.y1)
	});

	$('.crop-x1').val(selection.x1);
	$('.crop-y1').val(selection.y1);
	$('.crop-x2').val(selection.x2);
	$('.crop-y2').val(selection.y2);
	$('.img-width').val($('.upload-img').width());
	$('.img-height').val($('.upload-img').height());
}
$(document).ready(function () {

	$('.reupload-head').click(function () {
		// $('.upload-img').hide();
		// $('.reupload-head').hide();
		// $('.upload-file-btn').show();
		// $('.imgareaselect-outer').remove();
		// // imgAreaSelectApi.remove(true);
		// imgAreaSelectApi.setOptions({hide:true});
		jumpurl('__SELF__');
	});

	$('.save-head').click(function () {
		var url  = $('.upload-head-form').attr('action');
		var data = $('.upload-head-form').serialize();
		loading('正在保存，请稍候...');
		$.ajax({
			type: "post",
			url: url,
			data : data,
			success : function(data){
				removeLoading();
				if(data.status==200){
					msgbox(data.info);
					if(data.data.url){
						jumpurl(data.data.url);
					}
				}else{
					msgbox(data.info,'error');
				}
			},
			error :function (data) {
				removeLoading();
				msgbox('请求失败，请稍候再试！','error');
			}
		});
	});
	$('#file_upload').uploadify({
		'formData' : { '<?php echo session_name();?>' : '<?php echo session_id();?>' ,'filepath':'head'},
        'auto':true,//是否自动上传
        'buttonText':'从电脑上选择照片',
        'uploader':'{:URL("File/upload")}',//上传处理程序
        'multi' : false,//允许同时上传多张图片
        'swf': "__PUBLIC__/Js/uploadify.v3.2.1/uploadify.swf",
        'overrideEvents' : ['onDialogClose','onUploadSuccess','onUploadError','onSelectError'],
        'onSelectError': function (file, errorCode, errorMsg) {
        	var msgText = "上传失败==>";  
	        switch (errorCode) {  
	            case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED:  
	                msgText += "每次最多上传 " + this.settings.queueSizeLimit + "个文件";  
	                break;  
	            case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:  
	                msgText += "文件大小超过限制( " + this.settings.fileSizeLimit + " )";  
	                break;  
	            case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:  
	                msgText += "文件大小为0";  
	                break;  
	            case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:  
	                msgText += "文件格式不正确，仅限 " + this.settings.fileTypeExts;  
	                break;  
	            default:  
	                msgText += "错误代码：" + errorCode + "\n" + errorMsg;  
	        }  
	        msgbox(msgText,'error');
        },
        'fileTypeDesc':'支持的格式：',
	    'fileTypeExts':'*.jpg;*.jpeg;*.gif;*.png',//允许上传的文件后缀
        'fileSizeLimit':'2MB',//上传文件的大小限制
        'queueSizeLimit' : 1,//上传数量
        'queueID':'upload_queue_list',
        //上传到服务器，服务器返回相应信息到data里
        'onUploadSuccess':function(file, data, response){
            if(data){
				if(data=='err'){
					alert('上传文件失败！');
				}else{
					json      = jQuery.parseJSON(data);
					filename  = json.filename;
					filepath  = json.filepath;
					file_icon = json.file_icon;
					fileid    = json.fileid;
					$('.upload-img').attr('src',filepath);
					$('.crop-preview-big img').attr('src',filepath);
					$('.crop-preview-small img').attr('src',filepath);
					$('.file_id').val(fileid);

					$('.upload-img').show();
					$('.reupload-head').show();
					$('.upload-file-btn').hide();

					$('.crop-x1').val(0);
					$('.crop-y1').val(0);
					$('.crop-x2').val(200);
					$('.crop-y2').val(200);
					$('.img-width').val($('.upload-img').width());
					$('.img-height').val($('.upload-img').height());

					imgAreaSelectApi = crop_img();
				}
			}else{
				alert("不能非法上传文件！");
			}
        }
	});
});

</script>